<template>
  <div class="dashboard-container">
    <div class="dashboard-text">功能接口全览</div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      default-expand-all
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="label"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="version"
        label="是否开通">
        <template slot-scope="scope">
          <span v-show="scope.row.name" v-if="scope.row.open" class="success">是</span>
          <span v-show="scope.row.name" v-else class="warning">尚未拥有此接口权限</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="version"
        label="必要配置">
        <template slot-scope="scope">
          <!--消息配置-->
          <span v-show="scope.row.name==='open.auth.code.send'" v-if="configMes" class="success">已配置，<el-button
            type="text" size="small" @click="showMessageConfig()">修改/查看</el-button></span>
          <span v-show="scope.row.name==='open.auth.code.send'" v-else class="warning">目前尚未配置必要参数，仅可获取简单型验证码，详情查看说明文档或接口文档<el-button
            type="text" size="small" @click="showMessageConfig()">立即配置</el-button></span>
          <!--文件配置-->
          <span v-show="scope.row.name==='open.file.upload'" v-if="configFile" class="success">已配置，<el-button
            type="text" size="small" @click="showFileConfig()">修改/查看</el-button></span>
          <span v-show="scope.row.name==='open.file.upload'" v-else class="warning">目前尚未配置必要参数，详情查看说明文档或接口文档<el-button
            type="text" size="small" @click="showFileConfig()">立即配置</el-button></span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="130">
        <template slot-scope="scope">
          <el-button type="text" size="small" v-show="scope.row.name" @click="testApiClick(scope.row)">接口文档</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--消息配置对话框-->
    <el-dialog
      :visible.sync="messageConfigViewShow"
    >
        <span slot="title">
          配置消息功能
        </span>
      <h3>保存时，选项卡选中状态为默认激活模板，即下发短信将使用激活的类型模板<span v-if="showMessage">，目前激活状态模板为：<span
        class="success">{{showMessageName}}</span></span>
      </h3>
      <el-tabs v-model="activeName" type="card" @tab-click="onTabClick">
        <el-tab-pane v-for="item in messageConfigList" :key="item.id" :label="item.name" :name="`${item.id}`"
                     :content="item">
        </el-tab-pane>
      </el-tabs>
      <fieldset>
        <el-form
          ref="messageForm"
          :model="messageConfig"
          v-if="isRong"
        >
          <el-form-item prop="rname" :rules="[{ required: true, message: '请填写名称', trigger: 'blur' }]" label="名称">
            <el-input
              v-model="messageConfig.rname"
              type="text"
              :rows="5"
              placeholder="名称"
            />
          </el-form-item>
          <el-form-item prop="rdescription" :rules="[{ required: true, message: '请填写描述', trigger: 'blur' }]"
                        label="描述">
            <el-input
              v-model="messageConfig.rdescription"
              type="text"
              :rows="5"
              placeholder="描述"
            />
          </el-form-item>
          <el-form-item prop="rcompany" :rules="[{ required: true, message: '请填写下发前缀', trigger: 'blur' }]"
                        label="下发标题">
            <el-input
              v-model="messageConfig.rcompany"
              type="text"
              :rows="5"
              placeholder="短信下发前缀"
            />
          </el-form-item>
          <el-form-item prop="rapi" :rules="[{ required: true, message: '请填写蓉通达平台分配的API', trigger: 'blur' }]"
                        label="蓉通达提供的api">
            <el-input
              v-model="messageConfig.rapi"
              type="text"
              :rows="5"
              placeholder="api"
            />
          </el-form-item>
          <el-form-item prop="rhost" :rules="[{ required: true, message: '请填写蓉通达平台分配的host', trigger: 'blur' }]"
                        label="蓉通达提供的host">
            <el-input
              v-model="messageConfig.rhost"
              type="text"
              :rows="5"
              placeholder="host"
            />
          </el-form-item>
          <el-form-item prop="raccount" :rules="[{ required: true, message: '请填写蓉通达平台分配的account', trigger: 'blur' }]"
                        label="蓉通达提供的account">
            <el-input
              v-model="messageConfig.raccount"
              type="text"
              :rows="5"
              placeholder="account"
            />
          </el-form-item>
          <el-form-item prop="rpswd" :rules="[{ required: true, message: '请填写蓉通达平台分配的pswd', trigger: 'blur' }]"
                        label="蓉通达提供的pswd">
            <el-input
              v-model="messageConfig.rpswd"
              type="password"
              :rows="5"
              placeholder="pswd"
            />
          </el-form-item>
        </el-form>
        <el-form
          ref="messageForm"
          :model="messageConfig"
          v-if="isYimei"
        >
          <el-form-item prop="yname" :rules="[{ required: true, message: '请填写名称', trigger: 'blur' }]" label="名称">
            <el-input
              v-model="messageConfig.yname"
              type="text"
              :rows="5"
              placeholder="名称"
            />
          </el-form-item>
          <el-form-item prop="ydescription" :rules="[{ required: true, message: '请填写描述', trigger: 'blur' }]"
                        label="描述">
            <el-input
              v-model="messageConfig.ydescription"
              type="text"
              :rows="5"
              placeholder="描述"
            />
          </el-form-item>
          <el-form-item prop="ycompany" :rules="[{ required: true, message: '请填写下发前缀', trigger: 'blur' }]"
                        label="下发标题">
            <el-input
              v-model="messageConfig.ycompany"
              type="text"
              :rows="5"
              placeholder="短信下发前缀"
            />
          </el-form-item>
          <el-form-item prop="ysmsApi" :rules="[{ required: true, message: '请填写亿美软通平台分配的smsApi', trigger: 'blur' }]"
                        label="亿美软通提供的smsApi">
            <el-input
              v-model="messageConfig.ysmsApi"
              type="text"
              :rows="5"
              placeholder="smsApi"
            />
          </el-form-item>
          <el-form-item prop="yhost" :rules="[{ required: true, message: '请填写亿美软通平台分配的host', trigger: 'blur' }]"
                        label="亿美软通提供的host">
            <el-input
              v-model="messageConfig.yhost"
              type="text"
              :rows="5"
              placeholder="host"
            />
          </el-form-item>
          <el-form-item prop="yappId" :rules="[{ required: true, message: '请填写亿美软通平台分配的appId', trigger: 'blur' }]"
                        label="亿美软通提供的appId">
            <el-input
              v-model="messageConfig.yappId"
              type="text"
              :rows="5"
              placeholder="appId"
            />
          </el-form-item>
          <el-form-item prop="ysecretKey"
                        :rules="[{ required: true, message: '请填写亿美软通平台分配的secretKey', trigger: 'blur' }]"
                        label="亿美软通提供的secretKey">
            <el-input
              v-model="messageConfig.ysecretKey"
              type="text"
              :rows="5"
              placeholder="secretKey"
            />
          </el-form-item>
        </el-form>
      </fieldset>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="keysBtnLoading" type="primary" @click="onConfigMessage">保 存</el-button>
      </div>
    </el-dialog>
    <!--文件配置对话框-->
    <el-dialog
      :visible.sync="fileConfigViewShow"
    >
        <span slot="title">
          配置文件功能
        </span>
      <fieldset>
        <el-form
          ref="fileForm"
          :model="fileConfig"
        >
          <el-form-item prop="endpoint" :rules="[{ required: true, message: '请填写阿里云oss服务器地址', trigger: 'blur' }]"
                        label="阿里云oss服务器地址">
            <el-input
              v-model="fileConfig.endpoint"
              type="text"
              :rows="5"
              placeholder="阿里云oss服务器地址"
            />
          </el-form-item>
          <el-form-item prop="accessKeyId" :rules="[{ required: true, message: '请填写阿里云key', trigger: 'blur' }]"
                        label="阿里云key">
            <el-input
              v-model="fileConfig.accessKeyId"
              type="text"
              :rows="5"
              placeholder="阿里云key"
            />
          </el-form-item>
          <el-form-item prop="accessKeySecret"
                        :rules="[{ required: true, message: '请填写阿里云访问Secret', trigger: 'blur' }]"
                        label="阿里云访问Secret">
            <el-input
              v-model="fileConfig.accessKeySecret"
              type="text"
              :rows="5"
              placeholder="阿里云访问Secret"
            />
          </el-form-item>
          <el-form-item prop="bucketName" :rules="[{ required: true, message: '请填写存储集(单元)', trigger: 'blur' }]"
                        label="存储集">
            <el-input
              v-model="fileConfig.bucketName"
              type="text"
              :rows="5"
              placeholder="存储集"
            />
          </el-form-item>
          <el-form-item prop="cdn" :rules="[{ required: true, message: '请填写阿里云cdn', trigger: 'blur' }]"
                        label="阿里云cdn">
            <el-input
              v-model="fileConfig.cdn"
              type="text"
              :rows="5"
              placeholder="阿里云cdn"
            />
          </el-form-item>
          <el-form-item prop="root" :rules="[{ required: true, message: '请填写存储根节点', trigger: 'blur' }]"
                        label="存储根节点">
            <el-input
              v-model="fileConfig.root"
              type="text"
              :rows="5"
              placeholder="存储根节点"
            />
          </el-form-item>
        </el-form>
      </fieldset>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="keysBtnLoading" type="primary" @click="onConfigFile">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        isvId: null,
        appKey: null,
        tableData: [],
        configMes: false,
        configFile: false,

        messageConfigViewShow: false,
        showMessage: false,
        activeName: '1',
        messageConfigList: [{id: '1', name: '蓉通达'}, {id: '2', name: '亿美软通'}],
        isRong: true,
        isYimei: false,
        messageConfig: {
          _id: '',
          rname: '', rdescription: '', rcompany: '', rapi: '', rhost: '', raccount: '', rpswd: '',
          yname: '', ydescription: '', ycompany: '', ysmsApi: '', yhost: '', yappId: '', ysecretKey: ''
        },
        showMessageName: '',
        keysBtnLoading: false,

        fileConfigViewShow: false,
        fileConfig: {_id: '', endpoint: '', accessKeyId: '', accessKeySecret: '', bucketName: '', cdn: '', root: ''},
      }
    },
    methods: {
      //初始化数据
      loadTableData() {
        this.get('/portal/isv/getDocMenus', {isvId: this.isvId}, (resp) => {
          this.tableData = resp.data
        }, resp => {
          this.tipError(resp.msg)
        })
      },
      //接口文档
      testApiClick(row) {
        this.goRoute(this.redirect || '/isv/doc?itemId=' + row.id)
      },
      //消息对话框选项卡切换
      onTabClick(tab) {
        const item = tab.$attrs.content
        this.isRong = item.id === '1'
        this.isYimei = item.id === '2'
      },
      //消息对话框展示按钮
      showMessageConfig: function () {
        if (this.configMes) {
          this.loadMessage()
        } else {
          this.showMessage = false
        }
        this.messageConfigViewShow = true
      },
      //初始化消息展示信息
      loadMessage: function () {
        this.get('/portal/messageConfig/get', {appKey: this.appKey}, resp => {
          this.messageConfig = resp.data
          this.isRong = false
          this.isYimei = false
          if (this.messageConfig.senderCode === 'RongTongDaSmsSender') {
            this.activeName = '1'
            this.isRong = true
            this.showMessage = true
            this.showMessageName = '蓉通达'
          } else if (this.messageConfig.senderCode === 'YiMeiSmsSender') {
            this.activeName = '2'
            this.isYimei = true
            this.showMessage = true
            this.showMessageName = '亿美软通'
          }
        })
      },
      //消息配置保存按钮
      onConfigMessage: function () {
        this.$refs.messageForm.validate(valid => {
          if (valid) {
            var param;
            if (this.isRong) {
              param = {
                id: this.messageConfig._id,
                appId: this.appKey,
                type: 'auto',
                senderCode: 'RongTongDaSmsSender',
                extData: this.messageConfig
              }
            } else if (this.isYimei) {
              param = {
                id: this.messageConfig._id,
                appId: this.appKey,
                type: 'auto',
                senderCode: 'YiMeiSmsSender',
                extData: this.messageConfig
              }
            }
            this.keysBtnLoading = true
            this.post('/portal/messageConfig/add', param, resp => {
              this.keysBtnLoading = false
              this.messageConfigViewShow = false
              this.configMes = true
            }, resp => {
              this.keysBtnLoading = false
              this.tipError(resp.msg)
            })

          }
        })
      },
      //文件配置对话框展示按钮
      showFileConfig: function () {
        if (this.configFile) {
          this.loadFileConfig()
        } else {

        }
        this.fileConfigViewShow = true
      },

      //文件配置保存按钮
      onConfigFile: function () {
        this.$refs.fileForm.validate(valid => {
          if (valid) {
            var param = {
              id: this.fileConfig._id,
              appId: this.appKey,
              type: 'auto',
              templateType: 'alioss',
              extData: this.fileConfig
            }
            this.keysBtnLoading = true
            this.post('/portal/fileConfig/add', param, resp => {
              this.keysBtnLoading = false
              this.fileConfigViewShow = false
              this.configFile = true
            }, resp => {
              this.keysBtnLoading = false
              this.tipError(resp.msg)
            })

          }
        })
      },
      //初始化展示文件配置信息
      loadFileConfig: function () {
        this.get('/portal/fileConfig/get', {appKey: this.appKey}, resp => {
          this.fileConfig = resp.data
          this.fileConfigViewShow = true
        })
      },
      //初始化应用配置信息
      loadIsvInfo: function () {
        this.get('/portal/isv/getIsvPortal', {appKey: this.appKey}, (resp) => {
          this.configMes = resp.data.messageConfig
          this.configFile = resp.data.fileConfig
        })
      }
    },
    created() {
      this.isvId = sessionStorage.getItem("isvId")
      this.appKey = sessionStorage.getItem("appKey")
      if (this.isvId && null != this.isvId) {
        this.loadIsvInfo()
        //加载
        this.loadTableData()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 18px;
      line-height: 46px;
    }
  }
</style>
